<template>
  <div class="user-manual-select-selector-item" @click="change">
    <div class="user-manual-select-selector-item-title">
      {{ item.nodeName }} (协同)
    </div>
    <div style="padding-bottom: 0.5em" class="user-manual-select-selector-item-selected">
      多人执行
    </div>
    <div class="user-manual-select-selector-item-divider"/>
    <div class="user-manual-select-selector-item-selected single-line">
      <span class="iconfont">&#xe827;</span>
      节点执行人:
      {{ getSelectUserNames() }}
    </div>
  </div>
</template>
<script setup>
import {createProps} from '@/utils';

defineOptions({name: 'UserManualSelectSelectorItem'});
const props = defineProps({
  item: createProps(Object, () => ({})),
  selectedNode: createProps(Object, () => ({})),
  visibleModal: createProps(Boolean),
});
const emits = defineEmits(['update:selectedNode', 'update:visibleModal']);
function change() {
  emits('update:selectedNode', props.item)
  emits('update:visibleModal', true);
}

function getSelectUserNames() {
  try {
    let selectedUsers = props.item.selectedUsers || [];
    return selectedUsers.map(item => item.username).join(', ');
  } catch(e) {
  }
  return undefined
}
</script>
<style scoped lang="less">
.user-manual-select-selector-item:active {
  background: #f1f1f1;
}
.user-manual-select-selector-item {
  padding: 1em 0 1em 3em;
  background: white;
  margin: auto;
  user-select: none;
}

.user-manual-select-selector-item-title {
  font-weight: bolder;
  font-size: 1.1em;
  padding-bottom: 0.2em;
}

.user-manual-select-selector-item-divider {
  height: 1px;
  background: #e5e5e5;
  width: 100%;
}

.user-manual-select-selector-item-selected .iconfont {
  font-size: 1.3em;
}

.user-manual-select-selector-item-selected {
  display: flex;
  align-items: center;
  font-size: 0.9em;
  color: #999999;
  padding: 0.5em 0 0 0;
}

</style>